<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="" content=""/>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			#List{width: 200px;list-style-type: none;margin: 100px;}
			#List li{color: #fff;font-size: 14px;height: 35px;border: 1px solid #000;text-indent: 5px;overflow: hidden;}
			#List li h3{background: #008855;line-height: 35px;}
			#List li p{color: #000000;line-height: 30px;border-bottom: 1 dotted #DDDDDD;}
		</style>
	</head>
	<body>
		<ul id="List">
			<li>
				<h3>同事</h3>
				<p>千寻</p>
				<p>阿峰</p>
				<p>下坡垌</p>
				<p>最萌</p>
			</li>
			<li>
				<h3>好友</h3>
				<p>方法方法</p>
				<p>杜绝</p>
				<p>度假酒店</p>
				<p>打得通</p>
			</li>
			<li>
				<h3>同学</h3>
				<p>挣得多</p>
				<p>多濮阳</p>
				<p>过多的</p>
				<p>电动机</p>
			</li>
		</ul>
		<script>
			var aLi = document.getElementsByTagName('li');
			for (var i = 0; i < aLi.length; i++) {
				aLi[i].mark = true; 
				aLi[i].onclick = function(){
					if (this.mark) {
						
						this.style.height="auto";
						this.getElementsByTagName("h3")[0].style.backgroundColor = "#952685"
				
					} else{
						
						this.style.height="35px";
						this.getElementsByTagName("h3")[0].style.backgroundColor = "#008855"
					
					}
					var aP = document.getElementsByTagName("p");
					for (var j = 0; j < aP.length; j++) {
						aP[j].onclick = function(e){
							e.stopPropagation()
							for (var e = 0; e < aP.length; e++) {
								aP[e].style.backgroundColor = "";
							}
							this.style.backgroundColor = "#dddddd";
						}
					}
				   this.mark = !this.mark;
				}
			}
		</script>
	</body>
</html>
